<template>
  <Container class="user-edit">
    <div class="user-main">
      <div class="left">
        <div class="bg-light">
          <div class="container-title">账户信息</div>
          <Form :label-width="150">
            <FormItem label="用户名：">
              <span>{{ supplierName }}</span>
            </FormItem>
            <FormItem label="手机：">
              <span>{{ mobile }}</span>
            </FormItem>
            <FormItem label="姓名：">
              <span>{{ realName }}</span>
            </FormItem>
            <FormItem label="最后登录日期：">
              <span>{{ loginDate }}</span>
            </FormItem>
            <FormItem label="最后登录IP：">
              <span>{{ loginIp }}</span>
            </FormItem>
          </Form>
        </div>
        <div class="bg-light pb">
          <div class="container-title">账号信息</div>
          <div class="item">
            <Icon type="iphone" class="icon" size="20" /><span>手机：{{ mobile }}</span>
          </div>
          <div class="item">
            <Icon type="iphone" class="icon" size="20" /><span>邮箱：{{ email }}</span>
          </div>
        </div>
        <div v-if="showAd" class="bg-light mt integral">
          <div v-for="item in integral" :key="item.id" class="i-item" :class="item.class" @click="jumpPage(item.path)">
            <div class="l">
              <img :src="item.pic" alt="">
            </div>
            <div class="r">
              <p class="x-big">{{ item.name }}</p>
              <p>点击查看<img src="../../../assets/images/icon-right.png" alt=""></p>
            </div>
          </div>
        </div>
      </div>
      <div class="right mt">
        <Tabs>
          <TabPane label="登录日志">
            <Table
              stripe
              :height="options.tableHeight - 20"
              :columns="list.columns"
              :data="list.data"
              no-data-text="亲，没有找到相关记录哦！~"
            />
            <div class="pager">
              <Page
                :total="list.totalItem"
                :current="list.currentPage"
                :page-size="list.pageSize"
                show-sizer
                placement="top"
                @on-change="onPageChange"
                @on-page-size-change="onPageSizeChange"
              />
            </div>
            <Loader :status="list.status" @refresh="getLogData" />
          </TabPane>
        </Tabs>
      </div>
    </div>
  </Container>
</template>

<script>
import table from '@/table'
import { mapGetters } from 'vuex'
import LogData from './list/LogData'

export default {
  data () {
    return {
      list: LogData,
      options: {
        tableHeight: 300
      },
      supplierName: '',
      mobile: '',
      realName: '',
      loginIp: '',
      loginDate: '',
      email: '',
      headers: {},
      showAd: false,
      integral: [{
        class: 'red',
        pic: require('../../../assets/images/icon-gift0.png'),
        name: '好胎送礼兑换统计',
        path: '/home/tyre/list'
      }, {
        class: 'yellow',
        pic: require('../../../assets/images/icon-gift1.png'),
        name: '1-2月抢好胎送豪礼',
        path: '/home/tyreJanuary/list'
      }, {
        class: 'blue',
        pic: require('../../../assets/images/icon-gift2.png'),
        name: '3-4月抢好胎送福券',
        path: '/home/tyreMarch/list'
      }, {
        class: 'yellow',
        pic: require('../../../assets/images/icon-gift1.png'),
        name: '4-5月抢好胎送豪礼',
        path: '/home/tyreApril/list'
      }]
    }
  },
  mounted () {
    this.list.currentPage = ~~this.$route.query.currentPage || 1
    this.list.pageSize = ~~this.$route.query.pageSize || this.list.pageSize
    this.initTable()
    // this.showAdData()
    this.setHeader()
    this.getUserData()
    this.getLogData()
  },
  methods: {
    ...table,
    setHeader () {
      let userToken = this.user.userToken
      if (userToken) {
        this.headers['Authorization'] = 'Bearer ' + `${userToken}`
      }
    },
    showAdData () {
      this.$ajaxGet('/common/is_tire').then(data => {
        this.showAd = data
      })
    },
    getUserData () {
      this.$ajaxGet('/user/personInfo').then(data => {
        this.supplierName = data.username
        this.mobile = data.phone
        this.realName = data.real_name
        this.loginDate = data.last_login_date
        this.loginIp = data.last_login_ip
        this.email = data.email
      })
    },
    getLogData () {
      this.list.status = 'loading'
      let param = {
        size: this.list.pageSize,
        current: this.list.currentPage
      }
      this.$ajaxGet('/user/loginLog', param).then(data => {
        this.list.data = (data.data || []).map(item => {
          return {
            create_time: item.create_time,
            ip: item['ip'],
            browser: item.browser,
            system: item.system
          }
        })
        this.list.totalItem = Number(data.total)
        this.list.currentPage = Number(data.current_page)
        this.backTableTop()
        this.list.status = 'pass'
      }).catch(() => {
        this.list.status = 'error'
      })
    },
    onPageChange (number) {
      this.list.currentPage = number
      this.$router.push({
        query: {
          currentPage: this.list.currentPage,
          pageSize: this.list.pageSize
        }
      })
      this.getLogData()
    },
    onPageSizeChange (pageSize) {
      this.list.currentPage = 1
      this.list.pageSize = pageSize
      this.$router.push({
        query: {
          currentPage: this.list.currentPage,
          pageSize: this.list.pageSize
        }
      })
      this.getLogData()
    },
    jumpPage (path) {
      this.$router.push(path)
    }
  },
  computed: {
    ...mapGetters(['user'])
  }
}
</script>
